const {merge} = require("webpack-merge")
const path = require("path")
const baseConfig = require("./webpack.config.base")
const buildConfig = require("./webpack.build")
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const webpack = require("webpack")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

const config= {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, "./src"),
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        // include: path.resolve(__dirname, "./src"),
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1,
              // modules: {
              //   localIdentName: "[local]--[hash:base64:5]"
              // }

            }
          },
          {
            loader: "postcss-loader"
          }
        ]
      },
      {
        test: /\.less$/,
        include: path.resolve(__dirname, "./src"),
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1,
              modules: {
                localIdentName: "[local]--[hash:base64:5]"
              }

            }
          },
          {
            loader: "postcss-loader"
          },
          {
            loader:"less-loader",
            options:{
              javascriptEnabled:true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|ttf|eot)$/,
        include: path.resolve(__dirname, "./src"),
        use: {
          loader: 'file-loader',
          options: {
              limit: 10000,
              name: "assets/img/[name].[ext]"
          }
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        include: path.resolve(__dirname, "./src"),
        use: {
          loader: 'file-loader',
          options: {
              limit: 10000,
              name: 'assets/Particle/[name].[ext]'
          }
        }
      },
    ]
  },

  // optimization: {  无法使用
  //   usedExports: true, //js摇树
  //   splitChunks: {//代码分割
  //     chunks: "all",
  //   //   // minChunks: 2,
  //     automaticNameDelimiter: "-",
  //     cacheGroups: {
  //       react: {//将test中的依赖单独抽离出到react文件中
  //         test: /react|react-dom/,
  //         name: "react"
  //       }
  //     }
  //   },
  //   concatenateModules: true
  // },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            // warnings: false,
            pure_funcs:["console.log"]
          }
        }
      })
    ],
    splitChunks: {
      name: "common",
      chunks: "initial",
      cacheGroups: {
        common: {
          name: "common",
          chunks: "initial",
          priority: 2,
          minChunks: 2
        }
      }
    }
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(), //暂时用途不详，类似于try catch  遇见错误不停止代码
    new MiniCssExtractPlugin({
      filename: "[name].[chunkhash:8].css",
      chunkFilename: "[name].[chunkhash:8].css"
    }),
    new OptimizeCssAssetsPlugin({ // 压缩css
      cssProcessor: require("cssnano"),//cssnano 属于postcss 无需单独安装
      cssProcessorOptions: {
        discardComments: {removeAll: true}
      }
    }),
    new webpack.DefinePlugin({
      API_PORT: "'"+ buildConfig.ports.api_port + "'",
    }),
  ]
}
baseConfig.output.path = path.resolve(__dirname, process.env.NODE_ENV_OUTPUT + "/dist");
module.exports = merge(baseConfig, config)
